<template>
  <div class="container">
    <div class="main">
      <div class="main-title flex-between flex-align-items-center">
        <p class="font-14-B">已保存的搜索条件</p>
        <i class="iconfont icon-guanbi pointer" @click="close"></i>
      </div>

      <div class="list">
        <div v-for="(item, index) in list" :key="index" class="item">
          <div v-if="item.edit" class="item-input flex flex-align-items-center">
            <input v-model="item.nameInput" type="text" maxlength="20">
            <i class="iconfont icon-gou pointer" @click="editConfirm(index)"></i>
            <i class="iconfont icon-guanbi1 pointer" @click="inputToSpan(index)"></i>
          </div>
          <div v-else class="item-name flex flex-align-items-center">
            <p class="font-16">{{ item.name }}</p>
            <i class="iconfont icon-bianji pointer" @click="spanToInput(index)"></i>
          </div>
          <div v-if="item.platform" class="item-content flex">
            <p class="item-content-label font-14">搜索平台：</p>
            <div class="item-content-value font-14">
              {{ item.platform }}
            </div>
          </div>
          <div v-if="item.keyword" class="item-content flex">
            <p class="item-content-label font-14">搜索关键词：</p>
            <div class="item-content-value font-14">
              {{ `${item.keyword.value}-${item.keyword.name}` }}
            </div>
          </div>
          <div v-if="item.screen" class="item-content flex">
            <p class="item-content-label font-14">筛选条件：</p>
            <div class="item-content-value font-14">
              <template v-for="(screenItem, screenIndex) in item.screen" :key="screenIndex">
                <span v-if="screenIndex > 0" :key="screenIndex"></span>
                {{ `${screenItem.name}：${valueChange(screenItem.value)}` }}
              </template>
            </div>
          </div>
          <div class="item-bottom flex-between flex-align-items-center">
            <p class="item-time font-14">{{ item.time }}</p>
            <p class="item-bottom-btns flex flex-align-items-center">
              <span class="font-16 pointer">删除</span>
              <span class="font-16 pointer">应用</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits, ref } from 'vue';

const emit = defineEmits(['change', 'close']);

const list = ref([
  {
    name: '113456',
    nameInput: '',
    platform: 'YouTube',
    time: '2023年12月28日',
    edit: false,
    keyword: {
      key: '红人名',
      name: '红人名',
      value: '415646'
    },
    screen: [
      {
        key: 'cates',
        name: '分类',
        value: ['时尚生活']
      },
      {
        key: 'areas',
        name: '国家',
        value: ['美国', '加拿大', '英国', '德国', '法国', '荷兰', '比利时', '爱尔兰', '摩纳哥', '卢森堡', '越南', '印度', '印度尼西亚', '泰国', '菲律宾', '新加坡']
      },
      {
        key: 'averageViews',
        name: '平均观看量',
        value: '500-2000'
      }
    ]
  },
  {
    name: '113456',
    nameInput: '',
    platform: 'YouTube',
    time: '2023年12月28日',
    edit: false,
    keyword: {
      key: '红人名',
      name: '红人名',
      value: '415646'
    }
  }
]);

const close = () => {
  emit('close');
}
const spanToInput = index => {
  list.value[index].nameInput = list.value[index].name;
  list.value[index].edit = true;
}
const inputToSpan = index => {
  list.value[index].edit = false;
}
// 确认修改
const editConfirm = index => {
  list.value[index].name = list.value[index].nameInput;
  list.value[index].edit = false;
}
// 判断是否数组
const valueChange = value => {
  if (Array.isArray(value)) {
    return value.join(',');
  } else {
    return value;
  }
}
</script>

<style lang="less" scoped>
.container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100vw !important;
  height: 100%;

  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
  }
}

.main {
  position: absolute;
  right: 0;
  top: 0;
  width: 560px;
  height: 100%;
  background: #fff;

  .main-title {
    padding: 0 16px;
    height: 50px;
    box-shadow: -1px 0 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 0 #dcdee0;

    p {
      color: #333;
    }

    i {
      font-size: 20px;
      color: #666;
    }
  }

  .list {
    height: calc(100vh - 50px);
    overflow-y: auto;

    .item {
      padding: 24px;
      border-bottom: 1px solid #ededed;

      .item-input {
        margin-bottom: 18px;

        input {
          caret-color: @main-color;
          width: 420px;
          height: 38px;
          background: #f8f8f8;
          border-radius: 6px;
          border: 1px solid #e2e2e2;
          padding: 0 8px;
          color: #333;
          font-size: 16px;
          font-weight: 500;
          margin-right: 14px;
          outline: none;
        }

        i {
          font-size: 20px;

          &.icon-gou {
            color: @main-color;
            margin-right: 18px;
          }

          &.icon-guanbi1 {
            color: #dadada;
          }
        }
      }

      .item-name {
        margin-bottom: 18px;

        p {
          color: #333;
          margin-right: 10px;
        }

        i {
          color: @main-color;
        }
      }

      .item-content {
        margin-bottom: 8px;

        .item-content-label {
          color: #666;
          flex: 0 0 auto;
          word-wrap: nowrap;
        }

        .item-content-value {
          color: #333;

          span {
            display: inline-block;
            margin: 0 8px;
            width: 1px;
            height: 19px;
            background: #ededed;
            position: relative;
            top: 4px;
          }
        }
      }

      .item-bottom {
        padding-top: 8px;

        .item-time {
          color: #999;
        }

        .item-bottom-btns {
          span {
            margin-left: 24px;

            &:first-child {
              color: #999;
            }

            &:last-child {
              color: @main-color;
            }
          }
        }
      }
    }
  }
}
</style>
